import React from 'react';
import { connect } from 'react-redux';
// import $ from 'jquery';

class Waimai_ShopLists extends React.Component{
	componentDidMount(){
		this.props.getData();
	}

	render(){
		var items=this.props.list.map(function(item,index){
			var houzhui;
			if(item.image_path.indexOf('png')!=-1){
				houzhui='png';
			}else{
				houzhui='jpeg'
			}
			//var url="images/"+item.image_path+"."+houzhui;
			//console.log(url);
			if(!String.prototype.splice){
				String.prototype.splice=function(start,delCount,newSubStr){
					return this.slice(0,start)+newSubStr+this.slice(start+Math.abs(delCount));
				}
			}
			var temp1=item.image_path.splice(1,0,'/');
			var temp2=temp1.splice(4,0,'/');
			console.log(temp2);
			var url="http://fuss10.elemecdn.com/"+temp2+"."+houzhui;		
			return(
				 <div className="merchant" data-restaraut_id={item.id}>
		            <div className="logo_merchant">
		                <a href=""><img src={url} alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>{item.name}</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star">
		                       <div className="star" data-rating={item.rating} id={index}>
		                           {/*<span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>*/}
		                       </div>
		                        <span className="start_num" >{item.rating}</span>
		                        <span className="yueshou">月售{item.recent_order_num}单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span>/
		                        <span>起送费￥5</span>/
		                        <span>{item.average_cost}</span>
		                    </div>
		                    <div className="juli">
		                        <span>{item.distance}m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
			)
		})

		return(
			<div className="recommend">
		        <h2>推荐商家</h2>
		        {items}
		        <div className="merchant">
		            <div className="logo_merchant">
		                <a href=""><img src="images/nanxiaoguan.jpeg" alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>南小馆(来福士店)</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star">
		                       <div className="star">
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                           <span className="iconfont icon-star"></span>
		                       </div>
		                        <span className="start_num" >4.5</span>
		                        <span>月售706单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span>
		                        <span>起送费￥5</span>
		                        <span>￥48/人</span>
		                    </div>
		                    <div className="juli">
		                        <span>348m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div className="merchant">
		            <div className="logo_merchant">
		                <a href=""><img src="images/bifengtang.jpeg" alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>南小馆(来福士店)</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star">
		                        <div className="star">
		                            <span className="iconfont icon-star"></span>
		                            <span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
		                        </div>
		                        <span className="start_num" >4.5</span>
		                        <span>月售706单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span>
		                        <span>起送费￥5</span>
		                        <span>￥48/人</span>
		                    </div>
		                    <div className="juli">
		                        <span>348m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div className="merchant">
		            <div className="logo_merchant">
		                <a href=""><img src="images/bishengke.jpeg" alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>南小馆(来福士店)</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star">
		                        <div className="star">
		                            <span className="iconfont icon-star"></span>
		                            <span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
		                        </div>
		                        <span className="start_num" >4.5</span>
		                        <span>月售706单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span><span>起送费￥5</span><span>￥48/人</span>
		                    </div>
		                    <div className="juli">
		                        <span>348m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div className="merchant">
		            <div className="logo_merchant">
		                <a href=""><img src="images/nanxiaoguan.jpeg" alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>南小馆(来福士店)</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star" data-rating="5">
		                        <div className="star">
		                            <span className="iconfont icon-star"></span>
		                            <span className="iconfont icon-star"></span>
		                            <span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
		                        </div>
		                        <span className="start_num" >4.5</span>
		                        <span>月售706单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span><span>起送费￥5</span><span>￥48/人</span>
		                    </div>
		                    <div className="juli">
		                        <span>348m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div className="merchant">
		            <div className="logo_merchant">
		                <a href=""><img src="images/nanxiaoguan.jpeg" alt=""/></a>
		            </div>
		            <div className="xiangqing">
		                <div className="title">
		                    <h3><i>品牌</i><span>南小馆(来福士店)</span></h3>
		                    <p><span>保</span><span>票</span><span>准</span></p>
		                </div>
		                <div className="xiaoliang">
		                    <div className="wrap_star">
		                        <div className="star" data-rating="5">
		                            <span className="iconfont icon-star"></span>
		                            <span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
									<span className="iconfont icon-star"></span>
		                        </div>
		                        <span className="start_num" >4.5</span>
		                        <span>月售706单</span>
		                    </div>
		                    <div className="time">
		                        <span className="zhunshi">准时达</span>
		                        <span className="peisong">蜂鸟配送</span>
		                    </div>
		                </div>
		                <div className="price">
		                    <div className="money">
		                        <span>￥20起送</span><span>起送费￥5</span><span>￥48/人</span>
		                    </div>
		                    <div className="juli">
		                        <span>348m</span>
		                        <span>36分钟</span>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>

		)
	}

}

const mapStateToProps=function(state){
	return{
		list:state.list
	}
}
const mapDispatchToProps=function(dispatch){
	return{
		getData:function(){
			$.get('https://mainsite-restapi.ele.me/shopping/restaurants?latitude=31.23037&longitude=121.473701&offset=0&limit=20&extras[]=activities&terminal=h5',
				function(res){
				console.log(11);
				console.log(res);
				dispatch({
					type:'GET_DATA',
					list:res
				})
				console.log($(".star").length);
				for(var i=0;i<$(".star").length;i++){
					console.log($(".star")[i].getAttribute("data-rating"))
					$(".star img").css({width:"11px",marginLeft:"-4px"});
					$("#"+i).raty({
						readOnly: true, 
						score: $(".star")[i].getAttribute("data-rating"),
						path:"images/img",
						size:7
						}
					);
				}
				$(".merchant").on("click",function(){
					var id=$(this).data("restaraut_id");
			        console.log(1);
			        window.location.href="html/shop_detail.html?id="+id
			        console.log(GetRequest());
    			})

    			function GetRequest() {  
				   var url = location.search; //获取url中"?"符后的字串  
				   var theRequest = new Object();  
				   if (url.indexOf("?") != -1) {  
				      var str = url.substr(1);  
				      if(strs.indexOf("&")!=-1){
				      	strs = str.split("&")
				      };  
				      for(var i = 0; i < strs.length; i ++) {  
				         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
				      }  
				   }  
				   return theRequest;  
				}  
			})
		}
	}
}

var Waimai_ShopList=connect(
		mapStateToProps,
		mapDispatchToProps
	)(Waimai_ShopLists)

export default Waimai_ShopList;